<template>
  <div>
    <h3>检测p1的情况：</h3>
    <!-- <input type="text" v-model="p1.obj.desc.name" /> -->
    <hr />
  </div>
  <div>
    <h3>检测p2的情况：</h3>
    <input type="text" v-model="p2" />
    <hr />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

const p1 = ref({
  obj: {
    desc: {
      name: "tusuzer",
    },
  },
});
// console.log(p1.value.desc.name, "p1.value.desc.name");
setTimeout(() => {
  p1.value.obj.desc.name = 123 as any;
}, 1000);
watch(
  p1,
  (newVal, oldVal) => {
    console.log("p1", newVal, oldVal);
  },
  {
    deep: true,
  }
);

const p2 = ref("tusuzer");
watch(p2, (newVal, oldVal) => {
  console.log("p2", newVal, oldVal);
});

// 监听普通值是没用的，不用尝试了
// let p3 = 123;
// watch(
//   () => p3,
//   (a, b) => {
//     console.log("p3变化了", a, b);
//   }
// );
// setTimeout(() => {
//   p3 = 456;
// }, 2000);
</script>

<style scoped></style>
